<template>
  <div class="searchfunc">
    <div class="searchbox">
      <input type="text" placeholder="输入关键词,按enter键搜索">
    </div>
    <div class="searchcont">
      <div class="searchtype">
        <a class="active" href="#">全部</a>
        <a href="#">图片</a>
        <a href="#">矢量图</a>
      </div>
      <div class="result">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    
</script>

<style scoped>
.searchfunc{position: fixed;width:330px;height: 100%; background: #fff;z-index: 999}
.searchbox{width: 280px;height: 40px;background: #f3f3f3;margin: 15px auto;border-radius: 20px;overflow: hidden;}
.searchbox input{display: block; border: 0;margin: 0;padding: 0;height: 40px;line-height: 40px;width: 250px;padding-left: 50px;background: url(../assets/images/searchicon.png) no-repeat 20px center #f3f3f3;color: #bdbdbd;font-size: 13px;}
.searchcont{width: 310px;height: 800px;margin: 10px auto;}
.searchcont .searchtype{text-align: center}
.searchcont .searchtype a{display: inline-block;font-size: 14px;color: #696969;margin: 0 15px;}
.searchcont .searchtype a:hover,.searchcont .searchtype a.active{color: #22d7bb;}
.searchcont .result{height: 770px;width: 100%;overflow-y: auto;margin-top: 10px;}
.searchcont .result li{float: left;width: 90px;height: 90px;margin: 5px;background: #cfc}
</style>

